<template>
	<view style="height: 100%;">
		<view class="status_bar"></view>
		<view class="top" >
					 <u-icon size="50rpx" name="arrow-left" @click="toBack"></u-icon>
					 <text style="text-align: center;font-weight: bold;padding-left: 250rpx;">{{head}}</text>
					 <!-- <u-icon size="50rpx" style="float: right;" name="plus" @click="addEvent"></u-icon> -->
		</view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="navList" :is-scroll="false" :activeColor="'#000'"
					:inactiveColor="'#8A8A8A'" :fontSize = "29"  @change="tabsChange" :bold = "false" :current="current"></u-tabs-swiper>
		</view>
		
	<swiper  :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish" style="height: 100vh;" >
			<swiper-item >
				<scroll-view scroll-y style="height: 100%; width: 100%;" @scrolltolower="scrolltolower">
					<!--  -->
					<view v-for="(item,index) in post">
					<view  class="star-post-item" @click="selectPost(item)" @longpress="longpressPost">
					<view v-if="item.title" class="title" >
						<text user-select >{{item.title}}</text>
					</view>
					
					<view v-if="item.images&&item.images.length>0" class="img-list-box"
						>
						<!-- #ifdef MP -->
						<image v-for="(img, index) in item.images" :key="index" class="img"
							
							:src="img" :mode="'aspectFill'" ></image>
						<!-- #endif -->
						<!-- #ifndef MP -->
						<image v-for="(img, index) in item.images" :key="index" class="img"
							
							:src="img" :mode="'aspectFill'" ></image>
						<!-- #endif -->
					</view>
					<view class="user-box">
						<image class="avatar" :src="item.avater"   >
						</image>
						<view class="center">
							<view class="nickname-box">
								<view class="nickname" >
									{{item.nickName}}
								</view>
							</view>
							<view v-if="item.createTime" class="time">
								{{timeFrom(new Date(item.createTime).getTime())}}
								
							</view>
						</view>
						<view style="margin-top: 10rpx;margin-left: 40rpx;"><u-icon name="map"></u-icon></view>
						<view style="margin-right: 10rpx;margin-left: 20rpx;font-size: 20rpx;margin-top: 15rpx;"><text>{{item.location||'郑州大学'}}</text></view>
						<view class="right">
						<image src="../../../static/succe.png" mode="aspectFit" class="focus-box" ></image>
						</view>
					
					</view>
					</view>
					</view>
				</scroll-view>
			</swiper-item>
		<swiper-item class="swiper-item">
			<scroll-view scroll-y style="height: 100%; width: 100%;">
				<view class="content">
					<oneActivity v-for="item in activity0" :item="item"></oneActivity>
				</view>
			</scroll-view>
		</swiper-item>
	</swiper>
	</view>
	
					<!-- <u-tabs-swiper ref="uTabs" 
					:current="current" :list="navList" 
					:is-scroll="false" 
					swiperWidth="750"
					height="80"
					:activeColor="'#000'"
					:inactiveColor="'#8A8A8A'"
					:fontSize = "29"
					:bold = "false"
					:barWidth = "101"
					:barHeight= "4"
						@change="tabsChange">
					</u-tabs-swiper> -->
		<!-- </view> --> 

	</view>
</template>

<script>
	import oneAcitivity from "../../../components/oneActivity/oneActivity.vue"
	import timeFrom from '../../../uni_modules/star-community/utils/timeFrom.js'
	export default {
		onLoad(option){
			if(option.page==0)
			{this.swiperCurrent=0
			 this.head="我的寻搭"
			 this.current=0
			}
			if(option.page==1)
			{
				this.swiperCurrent=1
				this.head="我的活动"
				this.current=1
			}
			this.$H.get('articles/user').then(res=>{
				
				this.post=res.result.data
				// if (page.num == 1){
				// 	this.post = [] // 如果是第一页需手动制空列表	
				// }
				
			})
			this.$H.get('activities/user').then(res=>{
				this.activity0=res.result.data
			})
			},
		data() {
			return {
				navList: [{
						   name: '伙伴'
						}, {
						   name: '活动'
						}],
						current: 0, // tabs组件的current值，表示当前活动的tab选项
						swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
						post: {
						
							
						},
						activity0:[],
						page: 1,
						postlist: {},
						head: "",
						
				
				
			};
		},
	
		methods:{
			timeFrom,
			tabsChange(index) {
							this.swiperCurrent = index;
						},
			selectPost(item) {
				
				
				uni.navigateTo({
					url:'/pages/my_page/my_page?id='+item.id
				})
				// this.goto(`../post-detail/post-detail?id=${post.id}`)
			},
						// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
										let dx = e.detail.dx;
										this.$refs.uTabs.setDx(dx);
									},
									// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
									// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
										let current = e.detail.current;
										this.$refs.uTabs.setFinishCurrent(current);
										this.swiperCurrent = current;
										this.current = current;
									},
			toBack(){
				uni.navigateBack({
					url: '/pages/mine/index'
				})
			},
			scrolltolower(){
				this.page=this.page+1
				this.$H.get('articles/user?pageNum='+this.page).then(res=>{
					
					this.postlist=res.result.data
					this.post=[...this.post,...this.postlist]
					// if (page.num == 1){
					// 	this.post = [] // 如果是第一页需手动制空列表	
					// }
					
				})
				
			}

		},
		}
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
	.top{
		display: flex;
		width: 100%;
		box-sizing: border-box;
		// justify-content: space-between;
		
	    align-items: center;
		height: 200rpx;
		padding: 0 30rpx;
		background: linear-gradient(to right,#dff0fc,#fedac4);
		
	}
	.star-post-item {
		// width: 100%;
		box-sizing: border-box;
		// padding: 20rpx;
		display: flex;
		flex-direction: column;
		// border-bottom: 2rpx #eee solid;
		box-shadow: 5rpx 5rpx 4rpx 4rpx darkgrey;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		margin-left: 20rpx;
		margin-right: 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
	
		.user-box {
			display: inline-flex;
			align-items: center;
			margin-left: 40rpx;
	        margin-top: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 15rpx;
			.avatar {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
	
			.center {
				flex: 1;
				padding-right: 10rpx;
	
				.nickname-box {
					display: inline-flex;
					align-items: center;
	
					.nickname {
						font-size: 20rpx;
						font-weight: 600;
						color: #717171;
					}
				}
	
				.time {
					margin-top: 5rpx;
					font-size: 20rpx;
				}
			}
	
			.right {
				display: inline-flex;
				align-items: center;
				padding-right: 80rpx;
	
				.focus-box {
					display: inline-block;
					position: absolute;
					// border-radius: 100rpx;
					// color: #55aaff;
					width: 70rpx;
					
					// padding: 6rpx 20rpx;
				}
	
				// .chat-box {
				// 	@extend .focus-box;
				// }
	
				// .delete-box {
				// 	margin-left: 20rpx;
				// 	font-size: 28rpx;
				// 	font-weight: 700;
				// 	color: red;
				// }
	
				// .status-box {
				// 	margin-left: 20rpx;
				// 	font-size: 28rpx;
				// 	font-weight: 700;
				// 	color: orange;
				// }
	
				// .more-icon {
				// 	margin-left: 20rpx;
				// 	height: 50rpx;
				// 	width: 50rpx;
				// 	flex-shrink: 0;
				// }
			}
		}
	
		.title {
			margin-top: 20rpx;
			padding-left: 40rpx;
			padding-right: 30rpx;
			font-size: 30rpx;
			font-weight: 700;
		}
	
		.content {
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	
		.content-class {
			white-space: normal;
			word-wrap: break-word;
			overflow: hidden;
		}
	
		.img-list-box {
			margin-top: 15rpx;
			padding-left: 40rpx;
			// padding-right: 20rpx;
			// padding-right: 20rpx;
			// margin-right: 20rpx;
			margin-bottom: 10rpx;
			display: inline-flex;
			flex-wrap: wrap;
	
			.img {
				margin: 10rpx 20rpx 0 0;
				flex-shrink: 0;
				border-radius: 20rpx;
				height: 190rpx;
				width: 190rpx;
			}
		}
		}
</style>
